<!DOCTYPE html>
<html>
<head>
    <title>像素角色生成器</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <h1>像素角色生成器</h1>
        <div class="generator-container">
            <div class="controls">
                <div class="control-group">
                    <h3>头像</h3>
                    <canvas id="head-canvas" width="200" height="200"></canvas>
                    <div class="options">
                        <select id="head-hair-style">
                            <option value="">选择发型</option>
                            {% for style in features.head.hair_styles %}
                            <option value="{{ style }}">{{ style }}</option>
                            {% endfor %}
                        </select>
                        <select id="head-eye-type">
                            <option value="">选择眼睛</option>
                            {% for type in features.head.eye_types %}
                            <option value="{{ type }}">{{ type }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button class="generate-btn" data-type="head">随机生成头像</button>
                </div>
                <div class="control-group">
                    <h3>身体</h3>
                    <canvas id="body-canvas" width="200" height="200"></canvas>
                    <div class="options">
                        <select id="body-type">
                            <option value="">选择体型</option>
                            {% for type in features.body.types %}
                            <option value="{{ type }}">{{ type }}</option>
                            {% endfor %}
                        </select>
                        <select id="body-pose">
                            <option value="">选择姿势</option>
                            {% for pose in features.body.poses %}
                            <option value="{{ pose }}">{{ pose }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button class="generate-btn" data-type="body">随机生成身体</button>
                </div>
                <div class="control-group">
                    <h3>衣服</h3>
                    <canvas id="clothes-canvas" width="200" height="200"></canvas>
                    <div class="options">
                        <select id="clothes-type">
                            <option value="">选择服装</option>
                            {% for type in features.clothes.types %}
                            <option value="{{ type }}">{{ type }}</option>
                            {% endfor %}
                        </select>
                        <select id="clothes-pattern">
                            <option value="">选择图案</option>
                            {% for pattern in features.clothes.patterns %}
                            <option value="{{ pattern }}">{{ pattern }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button class="generate-btn" data-type="clothes">随机生成衣服</button>
                </div>
                <div class="control-group">
                    <h3>武器</h3>
                    <canvas id="weapon-canvas" width="200" height="200"></canvas>
                    <div class="options">
                        <select id="weapon-type">
                            <option value="">选择武器</option>
                            {% for type in features.weapon.types %}
                            <option value="{{ type }}">{{ type }}</option>
                            {% endfor %}
                        </select>
                        <select id="weapon-effect">
                            <option value="">选择特效</option>
                            {% for effect in features.weapon.effects %}
                            <option value="{{ effect }}">{{ effect }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button class="generate-btn" data-type="weapon">随机生成武器</button>
                </div>
            </div>
            <div class="preview">
                <h2>预览</h2>
                <canvas id="preview-canvas" width="300" height="400"></canvas>
                <div class="preview-controls">
                    <button id="save-btn">保存角色</button>
                    <button id="random-all-btn">随机生成全部</button>
                </div>
            </div>
        </div>
    </div>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html> 